<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Remote Rollovers</title>


<style type="text/css">
<!--

body {
  font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
}  

.remote {
  width: 333px;
  height: 500px;
  position: relative;
}

.remote ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.8em;
}

.remote a {
  text-decoration: none;
  color: #039;
}

.remote a .hotspot {
  width: 50px;
  height: 60px;
  position: absolute;
	background-image: url(img/shim.gif);
}

.remote a .link {
  position: absolute;
  display: block;
  width: 10em;
  right: -11em;
	cursor: pointer;
}

.remote a:hover .hotspot,
.remote a:focus .hotspot {
  border: 1px solid #fff;
}

.remote a:hover .link,
.remote a:focus .link {
  color: #0066FF;
}

.remote .rich a .hotspot {
  top: 50px;
  left: 80px;
}

.remote .sophie a .hotspot {
  top: 90px;
  left: 200px;
}

.remote .cath a .hotspot {
  top: 140px;
  left: 55px;
  width: 60px;
  height: 80px;
}

.remote .james a .hotspot {
  top: 140px;
  left: 145px;
}

.remote .paul a .hotspot {
  top: 165px;
  left: 245px;
  width: 60px;
  height: 80px;
}


.remote .rich a .link {
  top: 0;
}

.remote .sophie a .link {
  top: 1.2em;
}

.remote .cath a .link {
  top: 2.4em;
}

.remote .james a .link {
  top: 3.6em;
}

.remote .paul a .link {
  top: 4.8em;
}


-->
</style>
</head>

<body>

<div class="remote">
<img src="img/nerdcore.jpg" width="333" height="500" alt="Rich, Sophie, Cath, James and Paul" />
<ul>

<li class="rich">
	<a href="http://www.clagnut.com/" title="Richard Rutter">
	<span class="hotspot"></span>
	<span class="link">&raquo; Richard Rutter</span>
	</a>
</li>

<li class="sophie">
	<a href="http://www.wellieswithwings.org/" title="Sophie Barrett">
	<span class="hotspot"></span>
	<span class="link">&raquo; Sophie Barrett</span>
	</a>
</li>

<li class="cath">
	<a href="http://www.electricelephant.com/" title="Cathy Jones">
	<span class="hotspot"></span>
	<span class="link">&raquo; Cathy Jones</span>
	</a>
</li>

<li class="james">
<a href="http://www.jeckecko.net/blog/" title="James Box">
	<span class="hotspot"></span>
	<span class="link">&raquo; James Box</span>
	</a>
</li>

<li class="paul">
	<a href="http://twitter.com/nicepaul" title="Paul Annett">
	<span class="hotspot"></span>
	<span class="link">&raquo; Paul Annett</span>
	</a>
</li>

</ul>
</div>

</body>
</html>
